<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body" :style="itemData.targetType != 5 ?'':'display:none'">
              <div class="layui-form" lay-filter style="font-size:15px">
                <div class="layui-form-item">
                  <label class="layui-form-label">广告标题</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="categoryName"
                      v-model="itemData.title"
                      placeholder="输入栏目分类名称"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">广告图</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <div class="layui-upload">
                        <button
                          type="button"
                          class="layui-btn"
                          id="layuiadmin-upload-useradmin"
                        >选择文件</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">图片预览</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <img
                        id="img"
                        :src="
                        itemData.picUrl
                          ? itemData.picUrl
                          : require('@/assets/zwyl.jpg')
                      "
                        style="width:100px;height:100px;"
                      />
                    </div>
                  </div>
                </div>


                <div class="layui-form-item">
                  <label class="layui-form-label">位置排序</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="rank"
                      v-model="itemData.rank"
                      placeholder="输入位置排序"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                    <div class="layui-form-item">
                  <label class="layui-form-label">上级栏目分类</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <select name="categoryId" lay-filter="categoryId" v-model="itemData.categoryId" disabled='disabled'>
                      <option value="">请选择</option>
                      <option value="0">顶级栏目分类</option>
                    </select>
                  </div>
                </div>


                 <div class="layui-form-item">
                  <label class="layui-form-label">选择布局模式</label>
                  <div :class="item.id==itemData.layout.id?'layui-input-inline type-active':'layui-input-inline'"  v-for="(item,index) in bjlist" :key="index" style="width: 60px;pointer-events: none" >
                      <img name='rankimg' src="../../../assets/thumbnail1.png" :style="index==0?'width:60px;height:60px;':'display:none'" />
                      <img name='rankimg' src="../../../assets/thumbnail2.png" :style="index==1?'width:60px;height:60px;':'display:none'" />
                      <img name='rankimg' src="../../../assets/thumbnail3.png" :style="index==2?'width:60px;height:60px;':'display:none'" />
                    </div> 
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">所选门店</label>
                  <div class="layui-input-inline">
                    <select
                      name="shopId"
                      lay-filter="shopId"
                      v-model="itemData.shopId"
                      disabled='disabled'
                    >
                      <option v-for="item in shoplist" :value="item.id">{{
                        item.name
                      }}</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item"  v-show="itemData.layout.id!=3">
                  <label class="layui-form-label">商品分组</label>
                  <div class="layui-input-inline">
                    <select
                      name="targetId"
                      lay-filter="targetId"
                      v-model="itemData.targetId"
                    >
                      <option v-for="item in grouplist" :value="item.id">{{
                        item.groupName
                      }}</option>
                    </select>
                  </div>
                </div>
								
								<div class="layui-form-item" v-show="itemData.layout.id==3">
                  <div class="layui-inline">
                    <label class="layui-form-label">门店商品</label>
                    <div class="layui-input-inline" style="width: 100px;">
                      <div class="layui-upload"><button  class="layui-btn" @click="shopbtn">现金商城</button></div>
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                        <div class="layui-upload"><button  class="layui-btn layui-btn-normal" @click="ucshopbtn">UC商品</button></div>
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                       <div class="layui-upload"> <button  class="layui-btn layui-btn-warm" @click="wucshopbtn">WUC商品</button></div>
                    </div>
                  </div>
                </div>
								
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" @click="sure">确认</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="layui-card-body" :style="itemData.targetType == 5 ?'':'display:none'">
              <div class="layui-form" lay-filter style="font-size:15px">


                    <div class="layui-form-item">
                  <label class="layui-form-label">上级栏目分类</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <select name="categoryId" lay-filter="categoryId" v-model="itemData.categoryId" disabled='disabled'>
                      <option value="">请选择</option>
                      <option value="0">顶级栏目分类</option>
                    </select>
                  </div>
                </div>


                 <div class="layui-form-item">
                  <label class="layui-form-label">选择布局模式</label>
                  <div :class="item.id==itemData.layout.id?'layui-input-inline type-active':'layui-input-inline'"  v-for="(item,index) in bjlist" :key="index" style="width: 60px;pointer-events: none" >
                      <img name='rankimg' src="../../../assets/thumbnail1.png" :style="index==0?'width:60px;height:60px;':'display:none'" />
                      <img name='rankimg' src="../../../assets/thumbnail2.png" :style="index==1?'width:60px;height:60px;':'display:none'" />
                      <img name='rankimg' src="../../../assets/thumbnail3.png" :style="index==2?'width:60px;height:60px;':'display:none'" />
                    </div> 
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">所选门店</label>
                  <div class="layui-input-inline">
                    <select
                      name="shopId"
                      lay-filter="shopId"
                      v-model="itemData.shopId"
                      disabled='disabled'
                    >
                      <option v-for="item in shoplist" :value="item.id">{{
                        item.name
                      }}</option>
                    </select>
                  </div>
                </div>


                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">门店商品</label>
                    <div class="layui-input-inline" style="width: 100px;">
                      <div class="layui-upload"><button  class="layui-btn" @click="shopbtn">现金商城</button></div>
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                        <div class="layui-upload"><button  class="layui-btn layui-btn-normal" @click="ucshopbtn">UC商品</button></div>
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                       <div class="layui-upload"> <button  class="layui-btn layui-btn-warm" @click="wucshopbtn">WUC商品</button></div>
                    </div>
                  </div>
                </div>


                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" @click="sure">确认</button>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "storeadvadd",
  data() {
    return {
      dealerId: localStorage.getItem("dealerId"),
      id: "",
      cid:'',
      itemData: {
        title: "", //广告标题
        rank: "", //位置排序
        layout: {
          id: "",
          image: "",
          layoutName: "",
        }, //布局方式
        picUrl:'',//广告图
        categoryId:'',
        targetType:0,
        shopId: "", //门店
        targetId: "", //组
      },
      bjlist:[],
      shoplist: [],
      grouplist: [], //分组
      goodsId: "" //商品ID
    };
  },
  mounted() {
    var _this = this;
    window.getdates = this.getdates;
    layui.use("upload", function () {
      var upload = layui.upload;
      var uploadInst = upload.render({
        elem: "#layuiadmin-upload-useradmin", //绑定元素
        data: {
          type: 2,
        },
        url:imguploadurl, //上传接口
        done: function (res) {
          layer.msg("上传成功");
          _this.itemData.picUrl = res.msg;
        },
        error: function () {
          layer.msg("上传失败");
        },
      });
    });
    this.getshop(); //门店
    this.getbj(); //布局模式
   
  },
  methods: {
    getdates: function (data) {
    	this.getrouter(data.cid); 
    	this.cid=data.cid;
    	if(data.id){
	      var _this = this;
	       this.id = data.id
	       
	      var url = "/advert/bapi/v1.9/advert/" + data.id;
	      ajaxRequest(url, "GET", "json", "", function(ret, err) {
	          _this.itemData.targetId = ret.data.targetId;
	          _this.itemData.title = ret.data.title;
	          _this.itemData.picUrl = ret.data.picUrl;
	          _this.itemData.rank = ret.data.rank;
	        });
	    }
    },
    getshop: function() {
      var _this = this;
      var url = "/shop/papi/v1.9/shops" + "?dealerId.equals="+_this.dealerId + '&page=0&size=100';
      ajaxRequest(url, "GET", "json", '', function(ret, err) {
        _this.shoplist = ret.data.list;
        _this.itemData.shopId = ret.data.list[0].id;
        _this.getgroup();
      });
    },
     getgroup: function() {
      var _this = this;
      var shopId = _this.itemData.shopId;
      //var url="/mall/bapi/v1.9/item-group/"+shopId //门店下
      var url = "/mall/bapi/v1.9/item-group/" + shopId + "/enable"; //查门店下启用的
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        //alert(JSON.stringify(ret))
        _this.grouplist = ret.data;
      });
    },
    sure: function () {
      var _this = this;
      var hat = "POST";
      var dates = _this.itemData;
      dates.rank = Number(_this.itemData.rank)
      if (_this.id) {
        dates.id = _this.id;
        hat = "PUT";
      }
      var obj={};
      obj.id=this.cid;
      dates.category=obj;
      var url = "/advert/bapi/v1.9/advert";
      ajaxRequest(url, hat, "json", dates, function(ret, err) {
        layer.msg("操作成功");
        setTimeout(function() {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    },
    shopbtn:function () {
        var _this = this;
      layer.open({
        type: 2,
        title: "选择商城类型",
        content: baseurl + "/advshop" +'?id='+this.cid,
        area: ["90%", "90%"],
      });
      },
      ucshopbtn:function (data) {
        // alert(JSON.stringify(data))
        var _this = this;
      layer.open({
        type: 2,
        title: "选择商城类型",
        content: baseurl + "/advucshop" +'?id='+this.cid,
        area: ["90%", "90%"],
      });
      },
      wucshopbtn:function () {
        var _this = this;
      layer.open({
        type: 2,
        title: "选择商城类型",
        content: baseurl + "/advwucshop" +'?id='+this.cid,
        area: ["90%", "90%"],
      });
      },
    getbj: function() {     
      var _this = this;
      var url = "/advert/aapi/v1.9/layout";
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        _this.bjlist = ret.data;
      });
    },
    getrouter: function(id) {     
      var _this = this;
      var url = "/advert/aapi/v1.9/category/" +id;
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        _this.itemData.targetType = ret.data.targetType;
        _this.itemData.categoryId = ret.data.categoryId;
        _this.itemData.layout = ret.data.layout;
      });
    },

  },

  updated: function () {
    var _this = this;
    layui.use("form", function () {
      var form = layui.form;
      form.render();
      form.on('select(categoryId)', function(data){
        _this.itemData.categoryId=data.value;
      });
      form.on("select(shopId)", function(data) {
        //门店
        _this.itemData.shopId = data.value;
      });
      form.on("select(targetId)", function(data) {
        //分组
        _this.itemData.targetId = data.value;
      });
    });
  },
};
</script>
<style>
.layui-form-label {
  width: 120px;
}
.layui-input-block {
  margin-left: 150px;
}
.type-active{
    border: 3px solid #f60000;
}
</style>
